<template>
    <div class="editor_div" @click="setClick">
         <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor"
            :defaultConfig="toolbarConfig" :mode="mode" />
        <Editor v-model="content"
            @onCreated="onCreated" :defaultConfig="editorConfig" :mode="mode" />
    </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
    name: "editor",
    data(){
        return {
            editor:null,
            toolbarConfig: {
                toolbarKeys: [
                    //自定义菜单选项
                    "fontFamily",
                    "fontSize",
                    "bold",
                    "color",
                    "bgColor",
                    "justifyLeft",
                    "justifyRight",
                    "justifyCenter",
                    "justifyJustify",
                ],
                excludeKeys: ["sub", "sup"],
            },
            mode: "default", 
            editorConfig: {
                autoHeight: true,
                height: 200,
            },
            content:'',
           

        }

    },  
    props: {
        valueData:String,
    },
    components: {
        Editor,
        Toolbar
    },
    mounted(){
        setTimeout(()=>{
              this.content=this.valueData
        })
      
        
    },
    watch:{
        content(){
            console.log(this.content)
            if(this.content==this.valueData || this.content=="<p><br></p>"){
                return false
            }
            this.$emit("getContent",this.content)
        }
    },
    methods: {
        onCreated(editor){
            this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
        },
        setClick(){
            this.editor.focus(true)
        }
    },
};
</script>
<style scoped>

</style>